<template>
	<view class="page">
		<!-- 团长和成员头像部分 -->
		<view class="group-members">
			<view class="leader-avatar">
				<image class="avatar" src="/static/svg/default-avatar.svg" mode="aspectFill"></image>
				<view class="leader-tag">团长</view>
			</view>
			<image class="avatar" src="/static/svg/default-avatar.svg" mode="aspectFill"></image>
		</view>
		
		<!-- 拼团失败提示 -->
		<view class="fail-notice">
			<image class="fail-icon" src="/static/svg/group-fail.svg" mode="aspectFit"></image>
			<text class="fail-text">拼团失败，原路退还您的金额</text>
		</view>
		
		<!-- 操作按钮 -->
		<view class="action-buttons">
			<button class="check-order-btn" @click="goToOrder">查看订单</button>
			<button class="back-home-btn" @click="goToHome">返回首页</button>
		</view>
		
		<!-- 推荐列表 -->
		<view class="recommend-section">
			<view class="recommend-title">好物拼团推荐</view>
			
			<view class="product-list">
				<view v-for="(item, index) in recommendList" :key="index" class="product-card">
					<image class="product-image" :src="item.image" mode="aspectFill"></image>
					<view class="product-info">
						<text class="product-name">{{item.name}}</text>
						<view class="product-sold">
							<text class="text-gray">已拼{{item.soldCount}}件</text>
						</view>
						<view class="price-and-group">
							<text class="price">¥{{item.price}}</text>
							<view class="group-tag">{{item.groupSize}}人团</view>
						</view>
						<view class="group-leaders">
							<image v-for="(avatar, avatarIndex) in item.groupLeaders" 
								:key="avatarIndex" 
								class="leader-small-avatar" 
								:src="avatar" 
								mode="aspectFill">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 推荐列表数据
const recommendList = ref([
	{
		name: '艾丽莎抹茶蛋糕早点低糖健康',
		price: '136',
		soldCount: '536',
		groupSize: '3',
		image: '/static/svg/cake.svg',
		groupLeaders: ['/static/svg/default-avatar.svg', '/static/svg/default-avatar.svg']
	},
	{
		name: '艾丽莎抹茶蛋糕早点低糖健康',
		price: '136',
		soldCount: '536',
		groupSize: '3',
		image: '/static/svg/cake.svg',
		groupLeaders: ['/static/svg/default-avatar.svg', '/static/svg/default-avatar.svg']
	},
	{
		name: '艾丽莎抹茶蛋糕早点低糖健康',
		price: '136',
		soldCount: '536',
		groupSize: '3',
		image: '/static/svg/cake.svg',
		groupLeaders: ['/static/svg/default-avatar.svg', '/static/svg/default-avatar.svg']
	},
	{
		name: '艾丽莎抹茶蛋糕早点低糖健康',
		price: '136',
		soldCount: '536',
		groupSize: '3',
		image: '/static/svg/cake.svg',
		groupLeaders: ['/static/svg/default-avatar.svg', '/static/svg/default-avatar.svg']
	}
]);

// 跳转到订单页
const goToOrder = () => {
	uni.navigateTo({
		url: '/pages/order/list'
	});
};

// 返回首页
const goToHome = () => {
	uni.switchTab({
		url: '/pages/index/index'
	});
};

</script>

<style>
.page {
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #f5f5f5;
}

.group-members {
	display: flex;
	justify-content: center;
	margin: 30rpx 0;
}

.avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	margin: 0 20rpx;
	border: 6rpx solid #FFCC00;
}

.leader-avatar {
	position: relative;
}

.leader-tag {
	position: absolute;
	top: -15rpx;
	left: 50%;
	transform: translateX(-50%);
	background-color: #FFCC00;
	color: #fff;
	font-size: 24rpx;
	padding: 6rpx 16rpx;
	border-radius: 20rpx;
}

.fail-notice {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 40rpx 0;
}

.fail-icon {
	width: 48rpx;
	height: 48rpx;
	margin-right: 20rpx;
}

.fail-text {
	font-size: 36rpx;
	color: #FFCC00;
	font-weight: bold;
}

.action-buttons {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 0 20rpx;
	margin: 40rpx 0;
}

.check-order-btn, .back-home-btn {
	width: 45%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
	font-size: 30rpx;
}

.check-order-btn {
	background-color: #FFCC00;
	color: #fff;
}

.back-home-btn {
	background-color: #fff;
	color: #333;
	border: 2rpx solid #e0e0e0;
}

.recommend-section {
	width: 100%;
	margin-top: 30rpx;
}

.recommend-title {
	font-size: 32rpx;
	font-weight: bold;
	margin: 30rpx 0;
}

.product-list {
	width: 100%;
}

.product-card {
	display: flex;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.product-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 10rpx;
}

.product-info {
	flex: 1;
	padding-left: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.product-name {
	font-size: 28rpx;
	line-height: 1.4;
	font-weight: bold;
}

.text-gray {
	font-size: 24rpx;
	color: #999;
}

.price-and-group {
	display: flex;
	align-items: center;
}

.price {
	color: #ff6600;
	font-size: 36rpx;
	font-weight: bold;
}

.group-tag {
	margin-left: 15rpx;
	background-color: #ff6600;
	color: #fff;
	font-size: 24rpx;
	padding: 4rpx 16rpx;
	border-radius: 16rpx;
}

.group-leaders {
	display: flex;
	margin-top: 10rpx;
}

.leader-small-avatar {
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	border: 2rpx solid #fff;
	margin-right: -10rpx;
}

.item {
	display: flex;
	justify-content: space-between;
}

.card {
	width: 95vw;
}
</style>
